<script setup lang="ts">
import FlowerType from "@/components/FlowerType/FlowerType.vue";
import Flower, {Hydrangea, Saffron} from "@/modal/Flower";
import IconFont from "@/components/IconFont/IconFont.vue";
import {IconColor, IconType} from "@/components/IconFont/type";
import {store} from "@/modal/store";
import Action from "@/modal/Action";
import {type Reactive, reactive} from "vue";
import {ActionName} from "@/components/type";
import Compost from "@/modal/Compost";
import Buff from "@/modal/Buff";

const action = reactive(Action.getInstance());
const buff = reactive(Buff.getInstance());
const compost = reactive(Compost.getInstance());
// 渲染花卉实例
const flowers: Reactive<Flower[]> = store.flowers
const growUp = (modal: Flower) => {
  if (action.flowerTimes === 0) return;
  if (!modal.isRipen) {
    modal.growUp().getAward();
    action.useAction(ActionName.FLOWER);
    setFlowerBuff(modal)
  }
}

const setFlowerBuff = (modal: Reactive<Flower>) => {
  if (buff.suitBuff && modal instanceof Saffron) action.setAction([ActionName.BEEHIVE]);
  if (buff.forkBuff && modal instanceof Hydrangea) compost.collectCompost(1);
}
</script>

<template>
  <div class="flowers container-fluid col-12">
    <div class="flowers-top flowers-title col-12">
      <icon-font :icon-type="IconType.ACTION"
                 :color="IconColor.FLOWER"
                 :is-desc="true"
                 font-size="xx-large">
        <template #description>花卉</template>
      </icon-font>
    </div>
    <div class="flowers-bottom flowers-item col-12">
      <flower-type v-for="items in flowers"
                   :flower="items"
                   @emitGrowUp="growUp">
      </flower-type>
    </div>
  </div>
</template>
<style scoped>
.flowers {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flowers-bottom {
  height: calc(100% - 40px);
}

.flowers-top {
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flowers-item {
  display: flex;;
}
</style>